React এ Props এবং State দুটি গুরুত্বপূর্ণ কনসেপ্ট, যা আপনাকে কম্পোনেন্টগুলির মধ্যে ডেটা স্থানান্তর এবং ব্যবস্থাপনা করতে সহায়ক হয়। এই দুটি কনসেপ্টের মাধ্যমে আপনি React অ্যাপ্লিকেশনকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারেন।
Props (Properties)
Props হল প্রপার্টি বা ডেটা যা একটি কম্পোনেন্টের মাধ্যমে অন্য কম্পোনেন্টে পাস করা হয়। এটা একটি ইনপুট হিসেবে কাজ করে যা প্যারেন্ট কম্পোনেন্ট (পিতামাতা) তার চাইল্ড কম্পোনেন্টে (সন্তান) পাস করে। Props একবার পাস করা হলে, চাইল্ড কম্পোনেন্টে তাদের পরিবর্তন করা সম্ভব নয়। এটি read-only বা immutable ডেটা হিসেবে কাজ করে।
Props এর ব্যবহার:
- Props ব্যবহার করে ডেটা বা ইনফরমেশন এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাস করা হয়।
- Props-এর মাধ্যমে একটি কম্পোনেন্ট কনফিগার বা কাস্টমাইজ করা যায়।
- Props ব্যবহৃত হয় UI এর বিভিন্ন অংশকে একে অপরের সাথে সমন্বয় করার জন্য।
- Props সাধারণত রেন্ডার ফাংশনের ভিতরে ব্যবহার করা হয়।
Props এর উদাহরণ:
import React from 'react';
// Child component
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Parent component
function App() {
return <Welcome name="Azizur" />;
}
export default App;এখানে, App কম্পোনেন্ট থেকে Welcome কম্পোনেন্টে name প্রপস পাস করা হয়েছে। Welcome কম্পোনেন্ট এই name প্রপসকে ব্যবহার করে "Hello, Azizur!" প্রদর্শন করবে।
State
State হল ডাইনামিক ডেটা বা মিউটেবল (mutable) ডেটা যা একটি কম্পোনেন্টের ভিতরে রাখা হয় এবং সেটি সময়ের সাথে পরিবর্তিত হতে পারে। যখন স্টেট পরিবর্তিত হয়, তখন কম্পোনেন্টের UI পুনরায় রেন্ডার হয়। State ব্যবহারের মাধ্যমে আপনি ইনপুট ফর্মের মান, ক্লিকের সংখ্যা, টাইমার এর মান, ইত্যাদি ট্র্যাক করতে পারেন।
State এর ব্যবহার:
- State কম্পোনেন্টের ডাইনামিক ডেটা সংরক্ষণ করার জন্য ব্যবহৃত হয়।
- State পরিবর্তন করলে কম্পোনেন্টের UI পুনরায় রেন্ডার হয়।
- State কে সাধারণত
useStateহুক বা class components-এthis.stateএবংthis.setState()এর মাধ্যমে ব্যবহৃত হয়।
State এর উদাহরণ (Functional Component):
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>Click me</button>
</div>
);
}
export default Counter;এখানে, useState হুক ব্যবহার করে একটি count নামক স্টেট তৈরি করা হয়েছে। increment ফাংশন কল করলে count বৃদ্ধি পায় এবং UI তে তা রিফ্লেক্ট হয়।
State এর উদাহরণ (Class Component):
import React, { Component } from 'react';
class Counter extends Component {
constructor() {
super();
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.increment}>Click me</button>
</div>
);
}
}
export default Counter;এখানে, state this.state এর মাধ্যমে ব্যবহৃত হয়েছে এবং setState মেথডের মাধ্যমে স্টেট পরিবর্তন করা হয়েছে।
Props এবং State এর মধ্যে পার্থক্য
| পার্থক্য | Props | State |
|---|---|---|
| নির্ধারণ | Props প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়। | State একটি কম্পোনেন্টের ভিতরে ডেটা সংরক্ষণ করে। |
| পরিবর্তনযোগ্যতা | Props পরিবর্তনযোগ্য নয়, এটি immutable। | State পরিবর্তনযোগ্য, এটি mutable। |
| জায়গা | Props প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়। | State শুধুমাত্র কম্পোনেন্টের ভিতরে ব্যবহৃত হয়। |
| ব্যবহার | Props সাধারণত কম্পোনেন্ট কনফিগার করতে ব্যবহৃত হয়। | State ইউজারের ইনপুট বা অ্যাপ্লিকেশনের বর্তমান অবস্থান ট্র্যাক করতে ব্যবহৃত হয়। |
| রেন্ডারিং | Props পরিবর্তন হলে চাইল্ড কম্পোনেন্ট পুনরায় রেন্ডার হয়। | State পরিবর্তন হলে কম্পোনেন্টের UI পুনরায় রেন্ডার হয়। |
সারাংশ
- Props হল ইনপুট যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয় এবং এটি পরিবর্তনযোগ্য নয়।
- State হল ডাইনামিক ডেটা যা একটি কম্পোনেন্টের ভিতরে থাকে এবং এটি পরিবর্তনযোগ্য, ফলে UI রেন্ডার পরিবর্তিত হয়।
এগুলি React অ্যাপ্লিকেশন তৈরি করার জন্য খুবই গুরুত্বপূর্ণ কনসেপ্ট, কারণ এই দুটি কনসেপ্টের মাধ্যমে ডেটা ব্যবস্থাপনা এবং কম্পোনেন্টের মধ্যে তথ্য প্রবাহ নিয়ন্ত্রণ করা হয়।
Read more
